<template>
    <div class="messagelist">
        <div class="content">
            <!-- 头像 -->
            <div class="top-img">
                <!-- 虚拟头像没上传之前 -->
                <img class="noUpload" src="http://img.xuannang.net/morentouxiang_bianji@2x.png" alt="">
            </div>
            <!-- 账号信息 -->
            <div class="userInfo">
                <!-- 用户名 -->
                <div class="card-box">
                    <p class="edit">账号：{{userName}}</p>
                </div>
                <!-- 密码 -->
                <div class="card-box">
                    <p>密码：{{pwd}}</p>
                </div>
            </div>
            <!-- 重置密码按钮 -->
            <div class="reset"  @click="reset">重置密码</div>
        </div>
        <!-- 保存按钮 -->
        <div class="btn" @click="deleteUser">删除子账号</div>
        <!-- loading -->
        <div class="loading-box" v-show="isShowLoading">
             <van-loading type="spinner" color="white" />
        </div>
    </div>
</template>

<script>
import { Toast ,Dialog,Uploader,Loading } from 'vant';
import {addSubUser,deleteSubUser,getSubUserDetail,} from '@/api/user'
export default {
    name:'editSubUser',
    //声明组件
    components: {
        [Uploader.name]: Uploader,
        [Toast.name]: Toast,
        [Loading.name]:Loading,
        [Dialog.name]:Dialog
    },
    data(){
        return {
            isShowLoading:true,//是否显示；loading
            id:0,//子账号id
            token:'',//token
            userName:'',//用户名称
            pwd:'',//用户密码
        }
    },
    created(){
        //获得参数token
        if(this.$route.query.token){
            this.token = this.$route.query.token;
        }   
        //获得参数子账号id 
        if(this.$route.query.id && this.$route.query.id >0){
            this.id = this.$route.query.id;
            // 获得账号详情
            this.getUserDetails();
        }    
    },
    methods:{
        // 获得子账号详情
        getUserDetails(){
            let that = this;
            let para = {};
            para.token = that.token;
            para.childUserId = that.id;//子账号id
            getSubUserDetail(para).then(res => {
                if(res.code == 200){
                    let data = res.data;
                    this.userName = data.user_name;
                    this.pwd = data.pwd;
                }else if(res.code == 403){
                    Dialog.alert({
                        title: '提示',
                        message: '您的账号被挤下线，请重新登录',
                        confirmButtonText:'去登陆'
                    }).then(() => {
                        //跳转原生登录
                        let para = {};
                        para.linkType = "login";
                        this.interaction.hLinkToApp(para);
                    });
                }else{
                    Toast(res.msg);
                }
                this.isShowLoading = false;//隐藏loading
            })
        },
        //删除用户
        deleteUser(obj){
            let that = this;
            Dialog.confirm({
            title: '',
            message: '确定删除该子账号吗？',
            cancelButtonText:'我再想想',
            }).then(() => {
                // on confirm
                let para = {};
                para.token = that.token;
                para.childUserId = that.id;//子账号id
                // 发送数据请 
                deleteSubUser(para).then(res => {
                    if(res.code == 200){
                        Toast(res.msg);
                        // 返回上一页
                        setTimeout(function(){
                            let para = {};
                            para.isRefresh = true;
                            that.interaction.hReturn(para);	
                        },2100)
                    }else if(res.code == 403){
                        Dialog.alert({
                            title: '提示',
                            message: '您的账号被挤下线，请重新登录',
                            confirmButtonText:'去登陆'
                        }).then(() => {
                            //跳转原生登录
                            let para = {};
                            para.linkType = "login";
                            this.interaction.hLinkToApp(para);
                        });
                    }else{
                        Toast(res.msg);
                    }
                })
            }).catch(() => {
                // on cancel
                setTimeout(function(){
                    let para = {};
                    para.isRefresh = false;
                    that.interaction.hReturn(para);	
                },800)
               
            });
        },
        // 重置密码  跳转
        reset(){
            let that = this;
            let id = that.id;//当前对象id
            let token = that.token;
            // 跳转到新增
            let para = {};
            para.title = '编辑子账号';
            para.url = '/addSubUser?id='+id+"&token="+token;
            that.interaction.hLink(para);	
        },
        addUser(){

        },
    }
    
}

</script>

<style lang="stylus" scoped>
 input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: #a2a2a2;
}
 input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #a2a2a2;
}
 input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #a2a2a2;
}
 input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #a2a2a2;
}
 input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #a2a2a2;
}
*{
    box-sizing :border-box;
}
 .messagelist{
    width :100%;
    min-height :100%;
    background :#f1f1f1;
    padding: .266667rem;
    .content{
        padding:10px;
        margin-bottom :1.333333rem;
        background :#fff;
        border-radius:5px;
        position :relative;
        .top-img{
            text-align :center;
            margin-bottom :.266667rem;
            img{
                width :1.6rem;
                height :1.6rem;
            }
        }
        .userInfo{
            .card-box{
                p{
                    font-family:PingFangSC-Medium;
                    font-size:.4rem;
                    color:#494949;
                    letter-spacing:.0056rem;
                    margin-bottom :.4rem;
                    font-weight :bold;
                    &.edit{
                        margin-bottom :.533333rem;
                    }
                }
                input {
                    background:#f1f1f1;
                    border-radius:5px;
                    height:1.066667rem;
                    width :100%;
                    font-family:PingFangSC-Regular;
                    font-size:.373333rem;
                    color:#333;
                    letter-spacing:.013333rem;
                    padding :.266667rem;
                    margin-bottom :.533333rem;
                }
            }
        }
        .reset{
            font-family:PingFangSC-Regular;
            font-size:.373333rem;
            color:#1c90ff;
            letter-spacing:.005067rem;
            text-align:right;
            position :absolute;
            right :.266667rem;
            bottom :.4rem;
            line-height :.533333rem;
        }
    }
    .btn{
        opacity:0.9;
        background:#ffffff;
        box-shadow:0 0 8px 0 rgba(0,0,0,0.08);
        height:1.2rem;
        line-height :1.2rem;
        font-family:PingFangSC-Medium;
        font-size:.4rem;
        color:#ff533d;
        letter-spacing:.0056rem;
        text-align:center;
        position :fixed;
        left:0;
        bottom:0;
        width :100%;
    }
}    
</style>